<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sortables Test Page</title>
<script type="text/javascript" src="../jquery-1.2.4b.js"></script>

<script type="text/javascript" src="../ui.core.js"></script>

<script type="text/javascript" src="../ui.sortable.js"></script>

<style type="text/css" media="all">

body
{
	background: #fff;
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: 12px;
}

#myul {
	width: 600px;
	height: 400px;	
	border: 1px solid blue;
}

#myul li {
 list-style-type: none;
 border: 1px solid #999;
 margin: 5px; padding: 5px;
 background: #fff;
 width: 90px;
}

.hover {
	background: #eee;	
}

</style>
</head>
<body>

<div style="margin:3em;padding:3em;border:1px solid green;width:700px;">
	<ul id='myul'>
	    <li>Item 1</li>
	    <li>Item 2</li>
	    <li>Item 3</li>
	    <li>Item 4</li>
	    <li>Item 5</li>
	    <li>Item 6</li>
	    <li>Item 7</li>
	    <li>Item 8</li>
	    <li>Item 9</li>
	    <li>Item 10</li>
	</ul>
</div>
	
<script type="text/javascript">
$(document).ready(function(){
	
	$('#myul').sortable({
		items: 'li',
		containment: 'parent',
		hoverClass: 'hover'
	});
	$('#myul2').sortable( { items: 'li', containment: 'parent', hoverClass: 'hover' } );
	$('#myul3').sortable({
		animated: true
	});

});
</script>
</body>
</html>

